<template>
    <content-one title="文章评论">
        <template slot="content">
            <div id="comment">
                <template v-for="item in commentlist">
                    <div
                        :key="item._id"
                        class="comment-item"
                    >
                        <div
                            class="comment-content"
                            v-text="item.commentCon"
                        ></div>
                        <div
                            class="comment-timer"
                            v-text="item.commentTime"
                        ></div>
                    </div>
                </template>
                <div class="submit-comment">
                    <div class="write-area">
                        <Input
                            v-model="commentCon"
                            type="textarea"
                            :rows="6"
                            onresize="false"
                            placeholder="来说两句吧..."
                        />
                    </div>
                    <div class="center submit-button">
                        <div
                            class="pointer center"
                            @click="submit"
                        >
                            提交
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <div class="message">
            共{{ commentlist.length }}条评论
        </div>
    </content-one>
</template>

<script>
    import { formatDate } from 'assets/js/util';
    import { addComment, searchComment } from 'assets/js/api';
    import ContentOne from 'cmpts/ContentOne';
    export default {
        components: {
            ContentOne
        },
        props: {
            articleId: {
                type: String,
                default: ''
            },
            articleTitle: {
                type: String,
                default: ''
            }
        },
        data () {
            return {
                commentCon: '',
                commentlist: []
            };
        },
        mounted () {
            this.searchComment();
        },
        methods: {
            /**
             * 提交
             */
            submit () {
                if (!this.commentCon.trim()) {
                    this.$Message.info('评论不能为空');
                    return;
                }
                addComment({
                    commentCon: this.commentCon.trim(),
                    articleId: this.articleId,
                    articleTitle: this.articleTitle
                }).then(res => {
                    if (!res.status) {
                        this.$Message.info(res.msg);
                        return;
                    }
                    this.commentCon = '';
                    this.$Message.info(res.msg);
                    this.searchComment();
                });
            },
            /**
             * 获取评论
             */
            searchComment () {
                searchComment({
                    articleId: this.articleId
                }).then(res => {
                    if (!res.status) {
                        this.$Message.info('评论获取失败');
                        return;
                    }
                    let result = res.data.map(item => {
                        item.commentTime = formatDate(item.commentTime);
                        return item;
                    });
                    this.commentlist = result;
                });
            }
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/variable';
#comment{
    padding: 0 20px 20px;
    font-size: @font-size-medium;
    .comment-item{
        padding: 20px 0;
        line-height: 24px;
        border-bottom: 1px solid #ccc;
        .comment-timer{
            margin-top: 10px;
            text-align: right;
        }
    }
    .submit-comment{
        margin-top: 20px;
    }
    .submit-button {
        margin-top: 10px;
        div{
            width: 160px;
            background: #E2523A;
            color: @color-text-main;
            border-radius: 3px;
            line-height: 40px;
        }
    }
    /deep/.ivu-input-type-textarea textarea{
        resize: none;
    }
}
.message{
    line-height: 30px;
    color: @color-theme;
    font-size: @font-size-medium;
}
</style>
